<template>
	<view class="content" >
		<movable-area class="movableArea">
			<movable-view class="movableView"
				:position="position"
				:x="x"
				:y="y"
				:direction="direction"
				:damping="damping"
				@change="onChange"
				@touchend="onTouchend">
				<!-- <image src="../../static/homeShow.png" mode="widthFix" class="iconImage"></image> -->
				<view class="" @tap="onTap">
					<text>AI助理</text>
				</view>
			<view class="options" :class="{ leftOptions: !optionsLeft, rightOptions: optionsLeft }" v-if="optionShow">
				<option value="" @tap="AskAnswer">课程问答</option>
				<option value="" @tap="QuickPosition">快速定位</option>
				<option value="" @tap="Summary">视频总结</option>
				<option value="" @tap="AIopen">智能助理</option>
			</view>
			</movable-view>
		</movable-area>
	</view>
</template>

<script>
import { ref, onMounted } from 'vue';
import { TitleBarHeight ,statusBarHeight } from '../../utils/system.js';
export default {
    setup(props) {
        const x = ref(0);
        const y = ref(0);
        const x1 = ref(0);
        const x2 = ref(0);
        const y1 = ref(0);
        const y2 = ref(0);
        const move = ref({ x: 100, y: 100 });
        const optionShow = ref(false);
        const optionsLeft = ref(true); // 新增的状态变量

        onMounted(() => {
            uni.getSystemInfo({
                success: (res) => {
                    x1.value = 0;
                    x2.value = parseInt(res.windowWidth) - 0;
                    y1.value = 0;
                    y2.value = parseInt(res.windowHeight) - 300;
					setTimeout(() => {
					    if (props.position === 1 || props.position === 2) y.value = parseInt(y2.value * 0.2);
					    if (props.position === 3 || props.position === 4) y.value = parseInt(y2.value * 0.8);
					    if (props.position === 1 || props.position === 3) x.value = parseInt(x1.value);
					    if (props.position === 2 || props.position === 4) x.value = parseInt(x2.value);
					    move.value.x = x.value;
					    move.value.y = y.value;
					}, 1000);
                }
            });
        });

        const onChange = (e) => {
            if (e.detail.source === "touch") {
                move.value.x = e.detail.x;
                move.value.y = e.detail.y;
            }
        };

        const onTap = (e) => {
            optionShow.value = !optionShow.value;
            console.log(optionShow.value);
        };

        const onTouchend = () => {
            x.value = move.value.x;
            y.value = move.value.y;

            // 更新 .options 的位置
            updateOptionsPosition();

            setTimeout(() => {
                if (move.value.x < x2.value / 2) {
                    x.value = x1.value;
                    optionsLeft.value = true;
                } else {
                    x.value = x2.value;
                    optionsLeft.value = false;
                }
                console.log("yuan", x.value, y.value);
            }, 100);
        };

        const updateOptionsPosition = () => {
            optionsLeft.value = move.value.x < x2.value / 2;
        };
		 const AskAnswer = ()=>{
			 props.onAskAnswer()
		 }
		 const QuickPosition = ()=> {
			 props.onQuickPosition()
		 }
		 const Summary = ()=>{
		 	 props.onSummary()
		 }
		 const AIopen = ()=>{
		 	 props.onAIOpen()
		 }
        return {
            x,
            y,
            onChange,
            onTap,
            onTouchend,
            optionShow,
            optionsLeft,
			TitleBarHeight,
			AskAnswer,
			QuickPosition,
			Summary,
			AIopen
        };
    },
    props: {
        damping: {
            type: Number,
            default: 10
        },
        direction: {
            type: String,
            default: "all"
        },
        position: {
            type: Number,
            default: 4
        },
		onAskAnswer:{
			type:Function,
			required:true
		},
		onQuickPosition:{
			type:Function,
			required:true
		},
		onSummary:{
			type:Function,
			required:true
		},
		onAIOpen:{
			type:Function,
			required:true
		}
    }
};
</script>

<style lang="scss" scoped>
	.content {
		position: fixed;
		// z-index: 999;
	}

	.movableArea {
		position: fixed;
		float: left;
		top: 30vh;
		left: 0;
		width: 100%;
		height: 70vh;
		pointer-events: none;
		z-index: 9999;
		
	}

	.movableView {
		display: flex;
		justify-content: center;
		align-items: center;
		pointer-events: auto;
		width: 100rpx;
		height: 100rpx;
		padding: 10rpx;
		border-radius: 100%;
		border: 2px solid #33A3DC;
		background-color: #DAEE78;
		text{
			line-height: 100rpx;
			font-weight: 600;
			color: #33A3DC;
		}
	}

	.iconImage {
		display: block;
		width: 60rpx;
		height: 60rpx;
	}

	.options{
		display: flex;
		position: absolute;
		align-items: center;
		font-size: 30rpx;
		padding: 5rpx;
		border: 2px solid #33A3DC;
		background-color: #DAEE78;
		option{
			color: #33A3DC;
			border: 2px solid #33A3DC;
			border-radius: 20rpx;
		}
	}
		.leftOptions {
			right: 120rpx; // 右边距
			border-radius: 30rpx 0rpx 0rpx 30rpx;
		}
	
		.rightOptions {
			left: 120rpx; // 左边距
			border-radius: 0rpx 30rpx 30rpx 0rpx;
		}
</style>
